<template>
  <div>
    <echarts-view :options="option" height="400px" theme="walden"></echarts-view>
  </div>
</template>

<script>
import echartsView from '@/components/ECharts'
export default {
  props: {
    propsData: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    echartsView
  },
  data () {
    return {
      option: {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '10%',
          right: '0'
        },
        xAxis: {
          type: 'category',
          splitLine: false,
          data: this.propsData.X_ZB.split(',')
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        series: [
          {
            name: this.propsData.SJJH[0].TITLE,
            type: 'bar',
            data: this.propsData.SJJH[0].VALUEDATA.split(',')
          },
          {
            name: this.propsData.SJJH[1].TITLE,
            type: 'bar',
            data: this.propsData.SJJH[1].VALUEDATA.split(',')
          },
          {
            name: this.propsData.SJJH[2].TITLE,
            type: 'bar',
            data: this.propsData.SJJH[2].VALUEDATA.split(',')
          }
        ]
      }
    }
  },
  watch: {
    propsData: function (n) {
      this.option.series = [
        {
          name: n.SJJH[0].TITLE,
          type: 'bar',
          data: n.SJJH[0].VALUEDATA.split(',')
        },
        {
          name: n.SJJH[1].TITLE,
          type: 'bar',
          data: n.SJJH[1].VALUEDATA.split(',')
        },
        {
          name: n.SJJH[2].TITLE,
          type: 'bar',
          data: n.SJJH[2].VALUEDATA.split(',')
        }
      ]
    }
  }
}
</script>
